<template>
	<view class="p12">
		<view class="" v-if="type==''">
			<u-tabs bar-width="120" active-color="#70B52C" :list="tabList" :is-scroll="false" :current="current"
				@change="change"></u-tabs>
		</view>
		<view>
			<view class="item-coupon mt16" :class="'item-coupon'+item.status" v-for="(item,index) in dataList"
				:key="index">
				<view style="padding:40rpx 52rpx;">
					<view class="u-flex u-f-jsb">
						<view>
							<view class="fz14">{{item.name}}</view>
							<view class="fz12 c9 mt4">有效期至：{{item.validEndTime}}</view>
						</view>
						<view style="color: #FF563B;align-items: flex-end;" class="u-flex u-font-bold fz20 price">
							<span class="fz40 lh32">{{item.discountPrice}}</span>元
						</view>
					</view>

					<view class="u-flex u-f-jsb mt25 fz12 ">
						<view class="c6">
							<text v-if="item.usePrice>0">满{{item.usePrice}}可用</text>
							<text v-else>全场可用</text>
							<!-- 仅限新人使用 -->
						</view>
						<view>
							<view class="btn fz12" @click="toList(item)" v-if="item.status==1">使用</view>
						</view>
					</view>
				</view>
			</view>


			<view class="mt20">

				<u-loadmore :status="loadStatus" v-if="dataList.length>0" />
			</view>
			<view class="order-none u-flex u-f-justify fz16 c9 p50" v-if="dataList.length<=0">
				暂无数据！
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				dataList: [],
				tabList: [{
					name: '全部',
					id: '',
				}, {
					name: '未使用',
					id: '1',
				}, {
					name: '已使用',
					id: '2',
				}, {
					name: '已过期',
					id: '3',
				}],
				type:'',
				current: 1,
				loadStatus: 'more',
				page: 1,
			};
		},
		computed: {},
		onLoad(e) {

			if (e.data) {
				this.type='order'
				this.dataList = JSON.parse(e.data)
			} else {

				this.type=''
				this.initData()
			}
		},
		onShow() {

		},


		// 页面下拉到底部触发
		onReachBottom() {
			if (this.loadStatus == 'more') {
				this.getData()
			}
		},
		methods: {
			toList(obj) {
				if(this.type=='order'){
						wx.setStorage({
							key: 'selectedCoupon',
							data: JSON.stringify(obj),
							success() {
								uni.navigateBack()
							}
						});
				}else{
					
					uni.switchTab({
						url: '/pages/product/index'
					})
				}
			},
			change(e) {
				this.current = e
				this.initData()

			},
			initData() {
				this.page = 1
				this.dataList = []
				this.getData()

			},
			getData() {
				this.$api.couponPage({
					pageNo: this.page,
					pageSize: 10,
					status: this.tabList[this.current].id
				}, res => {
					if (res.code == 200) {
						let _list = res.data.list
						this.dataList = [...this.dataList, ..._list]
						// 判断所有数据是否请求完毕
						if (res.data.total > this.dataList.length) {
							this.page++
							this.loadStatus = 'more'
						} else {
							this.loadStatus = 'noMore'
						}
					}
				})
			}
		}

	};
</script>

<style lang="scss" scoped>
	page {
		background: #fff;
	}

	.item-coupon {
		background: url('https://diy.cdevelopment.cn/admin-api/infra/file/18/get/ffd120fee70783d39484610196bd3faca2a1d721c0a7922f9f240cef664bd036.png') no-repeat center;
		background-size: 100% 100%;
		width: 100%;
		height: 224rpx;

		.btn {
			color: #70B52C;
			border-radius: 3px;
			padding: 4rpx 40rpx;
			border: 1px solid #70B52C;
		}
	}

	.item-coupon2 {
		background: url('https://diy.cdevelopment.cn/admin-api/infra/file/18/get/adeb8b7de77c1ad1dccb8db991e6a1d1b81d665b165f81277a212857bde5c657.png') no-repeat center;
		background-size: 100% 100%;

		.price {
			color: #999 !important
		}
	}
</style>